<template>
  <div class="line-chart">
    <div class="chart-top">
      <span>销售走势图</span>
      <div class="time-type">
        <el-button
          type="text"
          :class="{ active: activeTitle === 'week' }"
          size="small"
          class="block"
          @click="changeEhart('week')"
          >最近7天</el-button
        >
        <el-button
          type="text"
          :class="{ active: activeTitle === 'month' }"
          size="small"
          class="block"
          @click="changeEhart('month')"
          >最近30天</el-button
        >
      </div>
    </div>
    <div>
      <el-button-group style="margin-top: 20px; padding-left: 20px">
        <el-button @click="getSaleAmount" :type="buttonSale">销售额</el-button>
        <el-button @click="getOrderNum" :type="buttonOrder"
          >支付订单数</el-button
        >
        <el-button @click="getPayUserNum" :type="buttonUser"
          >下单人数</el-button
        >
      </el-button-group>
      <div
        id="pile-char"
        :class="className"
        :style="{ height: height, width: width }"
      />
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import moment from "moment";
import { salesAmount, orderNumber, getEnrollmentByTime } from "@/api/wel";

export default {
  props: {
    className: {
      type: String,
      default: "chart",
    },
    width: {
      type: String,
      default: "100%",
    },
    height: {
      type: String,
      default: "350px",
    },
    autoResize: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      buttonSale: "primaty",
      buttonOrder: "",
      buttonUser: "",
      chart: null,
      activeTitle: "week",
      startTime: "",
      endTime: "",
      echartDataX: [],
      echartDataY: [],
    };
  },
  watch: {
    chartData: {
      deep: true,
      handler(val) {
        this.setOptions(val);
      },
    },
  },
  mounted() {
    this.changeEhart("week");
    this.getSaleAmount();
    this.$nextTick(() => {
      this.initChart();
    });
  },
  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },

  methods: {
    async changeEhart(type) {
      this.activeTitle = type;
      this.endTime = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");

      if (typeof type !== "object") {
        if (type === "today") {
          this.startTime = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
        } else if (type === "week") {
          this.startTime = moment(new Date() - 86400000 * 6).format(
            "YYYY-MM-DD hh:mm:ss"
          );
        } else if (type === "month") {
          this.startTime = moment(new Date() - 86400000 * 29).format(
            "YYYY-MM-DD hh:mm:ss"
          );
        }
      } else {
        this.startTime = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
        this.endTime = moment(new Date()).format("YYYY-MM-DD hh:mm:ss");
      }
    },

    getSaleAmount() {
      this.buttonSale = "primary";
      this.buttonOrder = "";
      this.buttonUser = "";
      if (this.echartDataX && this.echartDataY !== []) {
        this.echartDataX = [];
        this.echartDataY = [];
      }
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
        type: 1
      };
      salesAmount(params).then((result) => {
        let list = result.data.data;
        list.forEach((item, index) => {
          this.echartDataX.push(item.timeBucket);
        });
        list.forEach((item, index) => {
          this.echartDataY.push(item.sumTotal);
        });
        this.drawLine(this.echartDataX, this.echartDataY);
      });
    },
    getOrderNum() {
      this.buttonSale = "";
      this.buttonOrder = "primary";
      this.buttonUser = "";
      this.echartDataX = [];
      this.echartDataY = [];
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
      };
      orderNumber(params).then((result) => {
        let list = result.data.data;

        list.forEach((item, index) => {
          this.echartDataX.push(item.timeBucket);
        });

        list.forEach((item, index) => {
          this.echartDataY.push(item.sumTotal);
        });
        this.drawLine(this.echartDataX, this.echartDataY);
      });
    },
    getPayUserNum() {
      this.buttonSale = "";
      this.buttonOrder = "";
      this.buttonUser = "primary";
      this.echartDataX = [];
      this.echartDataY = [];
      let params = {
        startTime: this.startTime,
        endTime: this.endTime,
      };
      getEnrollmentByTime(params).then((result) => {
        let list = result.data.data;
        list.forEach((item, index) => {
          this.echartDataX.push(item.timeBucket);
        });
        list.forEach((item, index) => {
          this.echartDataY.push(item.sumTotal);
        });
        this.drawLine(this.echartDataX, this.echartDataY);
      });
    },

    initChart() {
      this.chart = echarts.init(document.getElementById("pile-char"));
      this.drawLine(this.echartDataX, this.echartDataY);
    },
    drawLine(echartDataX, echartDataY) {
      this.chart.setOption({
        xAxis: {
          data: echartDataX,
          boundaryGap: false,
          axisTick: {
            show: false,
          },
        },
        grid: {
          left: 10,
          right: 10,
          bottom: 20,
          top: 30,
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
          padding: [5, 10],
        },
        yAxis: {
          type: "value",
          axisTick: {
            show: false,
          },
        },
        legend: {
          data: ["经营概况"],
        },
        series: [
          {
            name: "经营概况",
            smooth: true,
            type: "line",
            itemStyle: {
              normal: {
                color: "#3888fa",
                lineStyle: {
                  color: "#3888fa",
                  width: 2,
                },
                areaStyle: {
                  color: "#bbbbbb",
                },
              },
            },
            data: echartDataY,
            animationDuration: 2800,
            animationEasing: "quadraticOut",
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.line-chart {
  .chart-top {
    border-bottom: 1px solid #bdbdbd;
    padding: 10px 20px 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.time-type {
  .active:focus,
  .active:hover {
    color: #409eff;
  }
  .block {
    color: black;
  }
}
</style>
